Nous allons aborder un des piliers d'Angular : TypeScript. Certains d'entre vous en ont peut-être déjà entendu parler, mais les autres ne vous en faites pas, nous allons démystifier tout cela immédiatement !
Avant de voir plus en détail ce que nous allons faire avec ce langage, et parce que je ne suis pas toujours inspiré, je vous propose de commencer par la définition de Wikipédia:
TypeScript est un langage de programmation libre et open-source, développé par Microsoft, qui a pour but d'améliorer et de sécuriser la production de code JavaScript. C'est un sur-ensemble de JavaScript (c'est-à-dire que tout code Javascript correct peut être utilisé avec TypeScript). Le code TypeScript est transcompilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web ou moteur JavaScript.
Je n'aurai pas été plus clair. Mais je vous rassure on va creuser tout ça tout de suite, je ne vais pas vous laisser avec une simple définition de Wikipédia.
Les faiblesses du langage JavaScript font que lorsque l'on commence à écrire beaucoup de code, on arrive vite à un moment où on s'emmêle les pinceaux ! Notre code devient redondant, perd en élégance, et devient de moins en moins lisible : on parle de code spaghetti. Vous comprendrez tous seuls la référence aux célèbres pâtes italiennes ! ;)
La communauté des développeurs, ainsi que certaines entreprises, se sont mis alors à développer des méta-langages pour améliorer JavaScript : CoffeeJS, Dart et TypeScript en sont les exemples les plus réussis. Ces outils apportent également de nouvelles fonctionnalités qui font défaut au JavaScript natif, avec une nouvelle syntaxe moins verbeuse.
TypeScript permet de typer nos variables, ce qui permet d'écrire du code plus robuste. Une fois que vous avez développé votre application, vous devez le compiler, c'est-à-dire le transformer en du code JavaScript que le navigateur pourra interpréter. En effet, votre navigateur ne sait pas interpréter le TypeScript. Vous devez d'abord compilez ce code en JavaScript pour qu'il soit lisible par votre navigateur.
Attention, l'extension des fichiers TypeScript est .ts et non .js !
Il est possible d’utiliser du JavaScript natif ou du TypeScript pour développer vos applications avec React. Il n’y a pas de recommandations particulières de la part de l’équipe React concernant le choix de l’un ou l’autre. Cependant, sachez que React est de mieux en mieux intégré avec TypeScript (Il est même possible de créer un projet React avec TypeScript en une seule ligne de commande), et que d’années en années TypeScript devient de plus en plus populaire. Sans compter de nombreuses librairies qui sont adaptées en TypeScript désormais.
De plus, TypeScript est généralement considéré comme une bonne pratique par la communauté des développeurs Web.
Le typage avec TypeScript
Voici comment typer nos variables avec TypeScript :
var pointDeVie: number = 100; var surnom: string = 'Green Lantern';
Comme vous pouvez le constater, il suffit d'ajouter deux points et le type de votre variable pour typer une variable en TypeScript. J'ai jouté en ressource la liste de tous les types de base disponibles avec TypeScript.
TypeScript et les fonctions
On peut aussi typer les paramètres et la valeur de retour d'une fonction, toujours avec la syntaxe des deux points :
function creerHeros(pointDeVie: number, surnom: string): Heros {
var heros = new Heros();
heros.pointDeVie = pointDeVie;
heros.surnom = surnom;
return heros;
}TypeScript est donc un méta-langage qui est surtout connu pour apporter le typage à JavaScript, mais il s'agit également d'un transpilateur, capable de générer du code vers ES5 ou ES6 !
TypeScript apporte évidemment d'autres fonctionnalités : les valeurs énumérées, les interfaces, la généricité, etc. L'objectif de cette section était que vous preniez rapidement connaissance de TypeScript, pour voir ensuite son fonctionnement concret dans une application React. Si vous voulez pousser plus loin vos connaissances en TypeScript, je vous invite à regarder la documentation officielle que j'ai ajouté en ressource de cette session.